<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

   <!-- 01 准备容器 -->
   <div id="app"></div>

   <!-- 02 引入react 开发相关库 注意顺序 -->
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"></script>
  
    <script type="text/babel">
        
        class App  extends React.Component{
            state={
                repoName:"", //stars 最多的仓库名
                repoURl:"",  //stars 最多的仓库名 地址
                repos:[]
            }

            render(){

                const {repoName,repoURl,repos}  =this.state

                return (
                    <div>           
                        <h1> most start repo is <a href={repoURl}>{repoName}</a></h1>
                        <ul>
                            {
                                    repos.map(repo=>{
                                        return <li key={repo.id}> <a href={repo.html_url}>{repo.name}</a></li>
                                    })
                            }
                            </ul>
                    </div>
                )
            }

            componentDidMount(){
                const {url}  =this.props
                console.log(url);

                fetch(url,{method:"GET"})
                .then(response=>response.json())
                .then(data=>{
                    // console.log(data);

                    let repo = data.items[0]
                    let {name,html_url}  =repo

                    this.setState({
                        repoName:name, //stars 最多的仓库名
                        repoURl:html_url,  //stars 最多的仓库名 地址
                        repos:data.items
                    })

                })
            }
        }

        const url =  "https://api.github.com/search/repositories?q=react&sort=stars"

        ReactDOM.render(<App url={url}/>,document.getElementById('app'))
    </script>
</body>
</html>